import React, { useState } from 'react';
import PomodoroTimer from '@/components/PomodoroTimer';
import ExerciseModal from '@/components/ExerciseModal';
import heroImage from '@/assets/hero-image.jpg';

const Index = () => {
  const [showExerciseModal, setShowExerciseModal] = useState(false);
  const [completedPomodoros, setCompletedPomodoros] = useState(0);

  const handleWorkComplete = () => {
    setShowExerciseModal(true);
  };

  const handleExerciseComplete = () => {
    setShowExerciseModal(false);
    setCompletedPomodoros(prev => prev + 1);
  };

  const handleSkipExercise = () => {
    setShowExerciseModal(false);
    setCompletedPomodoros(prev => prev + 1);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-background via-cream to-muted/20 relative overflow-hidden">
      {/* 背景装饰渐变 */}
      <div className="absolute inset-0 bg-gradient-to-br from-tomato/5 via-transparent to-mint/10 pointer-events-none" />
      <div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-bl from-primary/10 to-transparent rounded-full blur-3xl pointer-events-none" />
      <div className="absolute bottom-0 left-0 w-64 h-64 bg-gradient-to-tr from-mint/15 to-transparent rounded-full blur-2xl pointer-events-none" />
      {/* Hero Section */}
      <header className="relative overflow-hidden">
        <div className="absolute inset-0">
          <img 
            src={heroImage} 
            alt="宁静的工作环境，体现健康工作生活平衡" 
            className="w-full h-96 object-cover opacity-20"
          />
          <div className="absolute inset-0 bg-gradient-to-b from-background/50 to-background/80" />
        </div>
        
        <div className="relative z-10 container mx-auto px-4 py-16 text-center">
          <h1 className="text-5xl lg:text-7xl font-bold mb-6 bg-gradient-to-br from-tomato via-primary via-mint to-primary bg-clip-text text-transparent leading-tight">
            番茄起立
          </h1>
          <p className="text-xl lg:text-2xl mb-8 max-w-2xl mx-auto bg-gradient-to-r from-muted-foreground via-primary/80 to-muted-foreground bg-clip-text text-transparent font-medium">
            结合AI姿态识别的智能番茄工作法
          </p>
          <p className="text-lg max-w-xl mx-auto bg-gradient-to-r from-muted-foreground/90 to-primary/70 bg-clip-text text-transparent">
            专注工作20分钟到2小时，然后让AI陪你做健康运动。让工作与健康完美平衡 🍅✨
          </p>
          
          {completedPomodoros > 0 && (
            <div className="mt-8 p-6 bg-gradient-to-r from-mint/20 to-tomato/10 backdrop-blur-sm rounded-3xl max-w-sm mx-auto border border-mint/20">
              <p className="bg-gradient-to-r from-mint to-primary bg-clip-text text-transparent font-bold text-lg">
                今日已完成 {completedPomodoros} 个番茄 🎉✨
              </p>
            </div>
          )}
        </div>
      </header>

      {/* Main Content */}
      <main className="container mx-auto px-4 py-8 relative z-10">
        <div className="max-w-6xl mx-auto">
          <section className="mb-12">
            <div className="flex flex-col lg:flex-row items-center gap-12">
              {/* 左侧：番茄钟 */}
              <div className="flex-1">
                <PomodoroTimer onWorkComplete={handleWorkComplete} />
              </div>
              
              {/* 右侧：功能介绍 */}
              <div className="flex-1 space-y-6">
                <div className="card-healing">
                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 bg-tomato/20 rounded-full flex items-center justify-center">
                      🍅
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold mb-2">专注工作</h3>
                      <p className="text-muted-foreground">
                        25分钟专注时间，让你进入心流状态，提升工作效率
                      </p>
                    </div>
                  </div>
                </div>
                
                <div className="card-healing">
                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 bg-mint/20 rounded-full flex items-center justify-center">
                      🤖
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold mb-2">AI监督运动</h3>
                      <p className="text-muted-foreground">
                        休息时间到，AI识别你的动作，确保你真正活动身体
                      </p>
                    </div>
                  </div>
                </div>
                
                <div className="card-healing">
                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 bg-primary/20 rounded-full flex items-center justify-center">
                      💪
                    </div>
                    <div>
                      <h3 className="text-xl font-semibold mb-2">健康习惯</h3>
                      <p className="text-muted-foreground">
                        温和强制的运动提醒，让健康成为工作中的自然习惯
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
          
          {/* 使用说明 */}
          <section className="text-center">
            <h2 className="text-3xl font-bold mb-8 text-primary">
              如何使用番茄起立？
            </h2>
            <div className="grid md:grid-cols-3 gap-8">
              <div className="card-healing text-center">
                <div className="text-4xl mb-4">⏰</div>
                <h3 className="text-xl font-semibold mb-2">1. 开始番茄</h3>
                <p className="text-muted-foreground">
                  点击开始，专注工作25分钟
                </p>
              </div>
              
              <div className="card-healing text-center">
                <div className="text-4xl mb-4">📷</div>
                <h3 className="text-xl font-semibold mb-2">2. 授权摄像头</h3>
                <p className="text-muted-foreground">
                  休息时允许访问摄像头，AI将监督你的运动
                </p>
              </div>
              
              <div className="card-healing text-center">
                <div className="text-4xl mb-4">🎯</div>
                <h3 className="text-xl font-semibold mb-2">3. 完成动作</h3>
                <p className="text-muted-foreground">
                  起立运动一下，完成后继续下一个番茄
                </p>
              </div>
            </div>
          </section>
        </div>
      </main>
      
      {/* Exercise Modal */}
      <ExerciseModal
        isVisible={showExerciseModal}
        onComplete={handleExerciseComplete}
        onSkip={handleSkipExercise}
      />
    </div>
  );
};

export default Index;
